<template>
  <div className="container">
    <div class="mb-3">
      <label class="form-label" for="inputValue">添加待办事项</label>
      <input id="inputValue" v-model="value" class="form-control" placeholder="请输入代办事项" type="text" @keydown.enter="add" />
      <small id="desc" class="form-text text-muted">回车即可加入</small>
    </div>

    <div class="text-primary">待办列表</div>
    <ul class="list-group">
      <li v-for="(item, index) in todos" :key="'todos-' + index" class="list-group-item d-flex align-items-center">
        <div class="w-100" @click.prevent="openDoneModal(index)">
          <input :id="'todo-' + index" class="form-check-input me-1" type="checkbox" />
          <label :for="'todo-' + index" class="form-check-label">{{ item }}</label>
        </div>
        <button class="btn btn-danger btn-sm flex-shrink-0" @click="openDeleteModal(index)">删除</button>
      </li>
    </ul>

    <!-- delete Modal -->
    <div id="deleteModal" aria-hidden="true" aria-labelledby="deleteModalLabel" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 id="deleteModalLabel" class="modal-title">删除提示</h5>
            <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
          </div>
          <div class="modal-body">你确定要删除当前任务吗？</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">取消</button>
            <button class="btn btn-danger" type="button" @click="confirmDelete">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!-- done Modal -->
    <div id="doneModal" aria-hidden="true" aria-labelledby="doneModalLabel" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 id="doneModalLabel" class="modal-title">删除提示</h5>
            <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
          </div>
          <div class="modal-body">你确定要完成当前任务吗？</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">取消</button>
            <button class="btn btn-primary" type="button" @click="confirmDone">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import store from '@/store';
import * as bootstrap from 'bootstrap';

export default defineComponent({
  name: 'add',
  setup() {
    let deleteIndex = -1;
    let doneIndex = -1;
    let deleteModal: bootstrap.Modal;
    let doneModal: bootstrap.Modal;
    const value = ref('');

    //bootstrap.Modal必须放在 onMounted中初始化，大坑
    onMounted(() => {
      deleteModal = new bootstrap.Modal('#deleteModal');
      doneModal = new bootstrap.Modal('#doneModal');
    });
    const add = () => {
      if (value.value.trim() === '') return;
      store.commit('add', value.value);
      value.value = '';
    };

    const openDeleteModal = (index: number) => {
      deleteModal.show();
      deleteIndex = index;
    };
    const confirmDelete = () => {
      deleteModal.hide();
      store.commit('delete', deleteIndex);
      deleteIndex = -1;
    };

    const openDoneModal = (index: number) => {
      doneModal.show();
      doneIndex = index;
    };
    const confirmDone = () => {
      doneModal.hide();
      store.commit('done', doneIndex);
      doneIndex = -1;
    };

    //return的第三种形式
    return reactive({
      value,
      todos: computed(() => store.state.todos), //此处就可以获取vuex状态管理中的todos
      add,
      openDeleteModal,
      confirmDelete,
      openDoneModal,
      confirmDone
    });
  }
});
</script>

<style lang="scss" scoped></style>
